<template>
  <el-form ref="formData" :model="formData" :rules="rules" label-width="130px" v-loading="loading">
    <vision-form ref="form" :formData="formData" @resetForm="resetForm" @submitForm="submitForm"></vision-form>
    <template v-if="formData.visionDemandType != 4">
      <el-row :gutter="20" v-for="(item,index) in formData.referenceImgList" :key="index">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item
              label-width="0"
              :prop="'referenceImgList.' + index + '.referenceImgUrl'"
              v-if="isRouterAlive"
            >
              <vision-upload
                :imageData="{pathType: 'REFER_SHOP_WINDOW',typeId:'referenceImgUrl',removeUrl:true}"
                :item="item"
              ></vision-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input
              type="textarea"
              :autosize="{ minRows: 7, maxRows: 10}"
              placeholder="请输入内容"
              v-model="item.note"
              size="small"
            ></el-input>
          </div>
          <el-timeline v-if="formData.visionDemandId && index === 0">
            <el-timeline-item
              :timestamp="formData.createTime | createTime"
            >需求提出者： {{formData.createUserName}}</el-timeline-item>
            <el-timeline-item :timestamp=" formData.updateTime | updateTime ">
              最后修改人： {{formData.updateUserName}}
              <template
                v-if="formData.updateNumbe"
              >修改次数：{{formData.updateNumber}}</template>
            </el-timeline-item>
          </el-timeline>
          <div class="operating">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click.passive="removeReferenceImgList(item)"
              v-if="index !== 0"
              circle
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <el-form-item label-width="0">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click.prevent="addReferenceImgList"
        >新增</el-button>
      </el-form-item>
      <vision-EBC :formData="formData"></vision-EBC>
    </template>
    <div v-else class="videoInfo">
      <div class="InfoTitle">
        视频详细内容
        <p>(具体制作要求\字幕\音乐风格\参考链接\拍摄素材、三维模型等)</p>
      </div>
      <editor-bar v-model="formData.visionDemandVideoInfoDTO.videoInfo"></editor-bar>
    </div>
  </el-form>
</template>
<script>
const ERR_OK = 200;
import { formatDate } from "assets/js/date";
import visionForm from "./vision-form";
import visionEBC from "./vision-EBC";
import visionUpload from "./vision-upload";
import EditorBar from "components/quill-editor/wang-editor";
export default {
  data() {
    return {
      loading: true,
      isRouterAlive: true,
      formData: {
        createUserId: this.$store.getters.userId,
        visionDemandType: "",
        visionDemandName: "",
        productId: "",
        visionDemandDominantType: 1,
        referenceImgList: [],
        ebcList: [],
        businessUnitId: "",
        productCategoryId: "",
        predictResultImgTotal: "",
        pageViewsPercentage: 0,
        unitSessionPercentage: 0.0,
        visionDemandVideoInfoDTO: {
          videoSize: "",
          videoFormat: "",
          videoProportion: "",
          videoResolution: "",
          videoTime: 0,
          videoUsage: "",
          videoInfo: " "
        }
      },
      rules: {
        visionDemandName: [
          {
            required: "change",
            message: "请输入需求名称",
            trigger: "blur"
          }
        ],
        visionDemandType: [
          {
            required: "change",
            message: "请选择类型",
            trigger: "change"
          }
        ],
        productId: [
          {
            required: true,
            message: this.$t("m.placeholder.selectProductModelNumber"),
            trigger: "change"
          }
        ],
        pageViewsPercentage: [
          {
            required: "change",
            message: "请输入",
            trigger: "blur"
          }
        ],
        unitSessionPercentage: [
          {
            required: "change",
            message: "请输入",
            trigger: "blur"
          }
        ],
        "visionDemandVideoInfoDTO.videoSize": [
          {
            required: true,
            message: "请输入视频大小M",
            trigger: "blur"
          }
        ],
        "visionDemandVideoInfoDTO.videoFormat": [
          {
            required: true,
            message: "请输入视频格式",
            trigger: ["blur", "change"]
          }
        ],
        "visionDemandVideoInfoDTO.videoProportion": [
          {
            required: true,
            message: "请输入视频比例",
            trigger: ["blur", "change"]
          }
        ],
        "visionDemandVideoInfoDTO.videoResolution": [
          {
            required: true,
            message: "请输入视频分辨率",
            trigger: ["blur", "change"]
          }
        ],
        "visionDemandVideoInfoDTO.videoTime": [
          {
            required: true,
            message: "请输入视频时长s",
            trigger: "blur"
          }
        ],
        "visionDemandVideoInfoDTO.videoUsage": [
          {
            required: true,
            message: "请输入视频用途",
            trigger: "blur"
          }
        ]
      }
    };
  },
  filters: {
    createTime(data) {
      var date = new Date(data);
      return "需求提出日期：" + formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    updateTime(data) {
      var date = new Date(data);
      return "需求修改日期：" + formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  created() {
    if (this.$route.query.visionDemandId) {
      this.getVisionDemandById(this.$route.query.visionDemandId);
    } else {
      this.loading = false;
      this.addReferenceImgList();
    }
  },
  methods: {
    getVisionDemandById(visionDemandId) {
      this.$ajax
        .get(
          this.GLOBAL.oaVisionDemand +
            "/visionDemand/getVisionDemandById?visionDemandId=" +
            visionDemandId
        )
        .then(res => {
          this.loading = false;
          if (res.data.code === ERR_OK) {
            let formData = res.data.data.visionDemandVO;
            formData.referenceImgList = res.data.data.referenceImgList;
            formData.ebcList = res.data.data.ebcTemplateRelList;
            this.formData = formData;
            // formData.pageViewsPercentage = Number((formData.pageViewsPercentage*100).toFixed(4))
            formData.unitSessionPercentage = Number(
              (formData.unitSessionPercentage * 100).toFixed(4)
            );
            formData.visionDemandVideoInfoDTO =
              formData.visionDemandVideoInfoVO;
            if (this.formData.visionDemandStatusId === 9) {
              //是否状态完成
              this.$router.push({ path: "/OACenter/visualDesign/demandList" });
            }
          } else {
            this.$router.push({ path: "/OACenter/visualDesign/demandList" });
          }
        });
    },
    // 新增ReferenceImgList
    addReferenceImgList() {
      this.formData.referenceImgList.push({
        note: "",
        referenceImgUrl: "[]",
        visionDemandId: this.formData.visionDemandId
          ? this.formData.visionDemandId
          : "" //编辑需要添加
      });
    },
    //删除ReferenceImgList
    removeReferenceImgList(item) {
      var index = this.formData.referenceImgList.indexOf(item);
      if (index !== -1) {
        this.formData.referenceImgList.splice(index, 1);
        this.IsRouterAlive();
      }
    },
    IsRouterAlive() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let formData = JSON.parse(JSON.stringify(this.formData));
          formData.ebcList.forEach((item, index) => {
            item.displayPriority = index + 1;
          });
          //  formData.pageViewsPercentage = Number(formData.pageViewsPercentage/100).toFixed(4)
          formData.unitSessionPercentage = Number(
            formData.unitSessionPercentage / 100
          ).toFixed(4);
          if (this.formData.visionDemandId) {
            //编辑新增
            formData.updateUserId = this.$store.getters.userId;
          }
          this.$refs.form.loading = true;
          this.$ajax({
            method: "post",
            url:
              this.GLOBAL.oaVisionDemand +
              "/visionDemand/saveSaleDominantDemand",
            data: formData
          }).then(res => {
            this.$refs.form.loading = false;
            if (res.data.code === ERR_OK) {
              if (this.formData.visionDemandId) {
                this.$message.success("修改成功");
              } else {
                this.$message.success("新增成功");
              }
              this.promptReturn(res.data.data);
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    promptReturn(id) {
      this.$confirm("是否返回页面", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.push({ path: "/OACenter/visualDesign/demandList" });
        })
        .catch(() => {
          this.getVisionDemandById(id)
        });
      
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components: {
    visionForm,
    visionEBC,
    visionUpload,
    EditorBar
  }
};
</script>
<style lang="stylus" scoped>
.el-row {
  position: relative;
  margin-top: 20px;
  max-width: 1450px;
  padding-right: 250px;

  .el-form-item {
    margin-bottom: 0;
  }

  .operating {
    position: absolute;
    right: 220px;
    top: 0;
  }
}

.el-timeline {
  position: absolute;
  right: 0;
  top: 0;
}

.bg-purple {
  background: #d3dce6;
  padding: 10px;
}

.grid-content {
  border-radius: 4px;
}

.videoInfo {
  margin-top: 15px;

  .InfoTitle {
    font-size: 16px;
    color: #333333;
    padding: 7px 0;
    font-weight: bold;

    p {
      font-size: 14px;
      color: #f00;
    }
  }
}
</style>